<template>
    <div class="content" id="applyPassport">
        <div class="topPart">
            <div class="position">
                <div class="for_img1">
                    <div class="pos_item_left">所属园区 :</div>
                    <div class="pos_item_right" @click="ShouPup('area')">{{area ||"请选择通行园区"}}</div>
                </div>
                <div class="for_arrow"></div>
            </div>
            <div class="theLine1"></div>
            <div class="area">
                <div class="for_img2">
                    <div class="area_item_left">通行区域 :</div>
                    <div class="area_item_right" @click="ShouPup('position')">{{position
                        ||"请选择通行区域"}}
                    </div>
                </div>
                <div class="for_arrow" style="margin-top: 19px;"></div>
            </div>
            <div class="theLine2"></div>
            <div class="persion" v-if="userInfo.userLevel!=='09'">
                <div class="for_img3">
                    <img :src="img3" alt="">
                    <div class="persion_item_left" style="top: 1px">审核人 :</div>
                    <div class="persion_item_right" style="top: 1px" disabled>
                        {{persion ||"请选择审核人"}}
                    </div>
                </div>
                <!--<div class="for_arrow" style="margin-top: 19px;"></div>-->
            </div>
        </div>
        <div class="bottomPart">
            <div class="position">
                <div class="for_img4">
                    <div class="pos_item_left">通行时间 :</div>
                    <div class="pos_item_right"  @click="open('datatimePicker')">{{today}}</div>
                </div>
                <div class="for_arrow"></div>
            </div>
            <div class="theLine1"></div>
            <div class="area">
                <div class="for_img5">
                    <div class="area_item_left">通行次数 :</div>
                    <div class="area_item_right" style="left: 10px;" @click="ShouPup('times')">{{times}}</div>
                </div>
                <div class="for_arrow"></div>
            </div>
        </div>

        <div class="topPart" style="margin-top: 16px;height: 196px">
            <div class="position">
                <div class="for_img7">
                    <div class="pos_item_left" style="margin-top: -1px;margin-left: 23px">通行理由 :</div>
                </div>
            </div>
            <div class="font_area">
                <div><textarea
                        style="background: rgba(243,243,243,1);outline: none"
                        name="Test" cols="45" rows="4" class="inputtext" placeholder="请输入原因" v-model="notedata"></textarea>
                </div>
            </div>

        </div>
        <div class="subButton" @click="submit"><span class="subcontent">提交申请</span></div>
        <mt-datetime-picker
                ref="datatimePicker"
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                v-model="timeValue"
                :startDate="new Date()"
                @confirm="handleChange"
        ></mt-datetime-picker>
        <mt-popup  v-model="popupVisible" popup-transition="popup-fade" closeOnClickModal="true"  position="bottom">
            <div class="for_arrow2" @click="go_bk"></div><div class="font_area2">{{status=='area'?'请选择园区':status=='position'?'请选择通行区域':status=='persion'?'请选择审批人':'请选择通行次数'}}</div>
            <button class="forNew" @click="selected">确定</button>
            <mt-picker v-show="status=='area'" :slots="slots" value-key="name" @change="onValuesChange" style="width: 375px;" showToolbar></mt-picker>
            <mt-picker v-show="status=='position'" :slots="slots2" value-key="name" @change="onValuesChange2" style="width: 375px;" showToolbar></mt-picker>
            <mt-picker v-show="status=='persion'" :slots="slots3" value-key="name" @change="onValuesChange3" style="width: 375px;" showToolbar></mt-picker>
            <mt-picker v-show="status=='times'" :slots="slots4"  @change="onValuesChange4" style="width: 375px;" showToolbar></mt-picker>
        </mt-popup>

        <div id="mypopsss">
            <mt-popup
                    v-model="popupVisible2"
                    popup-transition="popup-fade">
                <div class="mypopups">
                    <div class="mypopups_top">
                        <div class="mypopups_topl"></div>
                        <div class="mypopups_topr">无需申请，请直接扫码通行</div>
                    </div>
                    <div class="qr" @click="popupVisible2=false">确 认</div>
                </div>
            </mt-popup>
        </div>
    </div>
</template>

<script>
    import {Toast} from "mint-ui";
    import ddbase from "../api/ddbase";
    import unt from "../utils/unti"

    export default {
        data() {
            return {
                popupVisible2:false,
                img3:require("../assets/img/apply_3.png"),
                initList: [],
                slots: [
                    {
                        flex: 1,
                        values: ['请选择园区'],
                        className: 'slot1',
                        textAlign: 'center',
                        valueKey:'name'
                    }
                ],
                slots2: [
                    {
                        flex: 1,
                        values: ['请选择区域'],
                        className: 'slot1',
                        textAlign: 'center',
                        valueKey:'name'
                    }
                ],
                slots3: [
                    {
                        flex: 1,
                        values: ["请选择审批人"],
                        className: 'slot1',
                        textAlign: 'center',
                        valueKey:'name'
                    }
                ],
                slots4: [
                    {
                        values: ['1次'],
                            // ['1', '2', '3', '4', '5', '10', '20'],
                    }
                ],
                status: '',
                timeValue: '',
                today: '',
                name: '',
                times: "1",
                area: '',
                position_id:'',
                position: '',
                persion: '',
                persion_id:'',
                message: "请选择通行次数",
                popupVisible: false,
                allData:[],
                top1:0,
                notedata:'',
                forgardenList:[],
                forareaList:[],
                forarea:'',
                seledA:false,
                seledP:false,
            };
        },
        watch:{
            // popupVisible(val, oldVal){
            //    alert("old"+val+"new:"+oldVal);
            // }
        },
        mounted() {
            let _this =this;
            let nowDate = new Date();
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate(),
            }
            this.today = date.year + '-' + 0 + date.month + '-' + date.date;
            unt.getuserInfs(_this,this.getData)
        },
        methods: {
            getData() {
                let _this=this;
                this.$api.getAllAreaParams({}).then((res) => {
                    _this.status="area"
                    _this.allData=res;
                    _this.forgardenList=res.gardenList;
                    // _this.forareaList=res.gardenList[0].areaList;
                    // _this.slots[0].values = res.gardenList;
                    // _this.slots2[0].values = res.gardenList[0].areaList;
                }).catch((err) => {
                    console.log(err)
                })
            },
            submit() {
                if(this.userInfo.userLevel==='09'){
                    this.popupVisible2=true
                    return;
                }
                if(!this.position_id){
                    Toast('请选择通行区域!');
                    return;
                }
                if(!this.persion_id){
                    Toast('没有审核人无法提交!');
                    return;
                }
                if(!this.notedata){
                    Toast('请输入原因!');
                    return;
                }
                let subParams = {
                    areaId: this.position_id,
                    jobNumber:this.userInfo.jobnumber,//this.userInfo.jobnumber,//this.userInfo.jobnumber
                    auditor: this.persion_id,
                    dateDay: this.today,
                    goCount: this.times.split("次")[0],
                    applyReason: this.notedata,
                    name: this.userInfo.name,//"姚远方",//this.userInfo.name
                    auditorName:this.persion,
                    userLevel:this.userInfo.userLevel
                }
                this.$api.requestForTimes(subParams).then((res) => {
                    console.log(res);
                    this.$router.push({ name: 'ApplyList'})
                }).catch((err) => {
                    Toast('本区域已有申请在审核中');
                })
            },
            open(picker) {
                // 初始化时间为当前时间，可填满上部空白，可选过期时间
                this.timeValue = new Date()
                this.$refs[picker].open()
            },
            ShouPup(which) {
                switch (which) {
                    case "area":
                        this.status = "area";
                        this.slots[0].values = this.forgardenList;
                        break
                    case "position":
                        if(this.area =='请选择通行园区' ||this.area ==''){
                            Toast('请先选择通行园区');
                            return
                        }else{
                            this.slots2[0].values=this.forareaList;
                        }
                        this.status = "position";
                        break;
                    case "persion":
                        this.status = "persion";
                        break
                    case "times":
                        this.status = "times";
                        break
                    default:
                        //这里是没有找到对应的值处理
                        break
                }
                this.popupVisible = true
            },
            go_bk(){
                this.popupVisible = false
            },
            selected(){
                this.status=='area'?this.seledA=true:this.status=='position'?this.seledP=true:'';
                this.popupVisible = false;
                if(this.status=='area'){
                    this.area= this.forarea
                }
            },
            onValuesChange(picker, values) {
                this.forarea = values[0].name;
                this.forareaList = values[0].areaList;
            },
            onValuesChange2(picker, values) {
                if(!values[0] || values[0]=="请选择区域"){
                    return;
                }
                let _this =this;
                let list=[];
                for (let i = 1; i <= values[0].applyCount*1; i++) {
                    list.push(i*1+"次");
                }
                this.slots4[0].values=list;
                if(this.slots4.length<1){
                    this.slots4[0].values='1次'
                }
                this.position_id = values[0].id;
                this.position = values[0].name;
                this.persion="该区域无审批人";
                if(values[0].goType !== 3){
                    let getPersion = {
                        type: values[0].goType,
                        jobNumber:this.userInfo.jobnumber
                    }
                    this.$api.GetManagerListOfArea2(getPersion).then((res) => {
                        if(res){
                            // this.slots3[0].values = res;
                            this.persion=res.userName;
                            this.persion_id = res.userId;
                        }else{
                            _this.slots3[0].values=["该区域无审批人"];
                            this.persion="该区域无审批人";
                        }
                    }).catch((err) => {
                        console.log(err)
                    })
                }else{
                    let getPersion = {
                        areaId: values[0].id,
                    }
                    this.$api.GetManagerListOfArea(getPersion).then((res) => {
                        if(res.length!==0){
                            this.slots3[0].values = res;
                            this.persion=res[0].name;
                            this.persion_id = res[0].jobNumber;
                        }else{
                            _this.slots3[0].values=["该区域无审批人"];
                            this.persion="该区域无审批人";
                        }
                    }).catch((err) => {
                        console.log(err)
                    })
                }
            },
            onValuesChange3(picker, values) {
                this.persion=values[0].name
            },
            onValuesChange4(picker, values) {
                this.times = values[0];
            },

            handleChange(value) {
                this.noScroll();
                this.today = this.$moment(value).format('YYYY-MM-DD')
            },
        },
    };
</script>
<style>
    #applyPassport .picker{
        padding-bottom: 50px;
        min-width:calc(475px - 100px) ;
    }
    #applyPassport .picker mint-datetime-picker{
      min-width:calc(475px - 100px) ;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #applyPassport .picker-selected{
        font-size: 22px;
        font-weight: 600;
    }
   #mypopsss.mint-popup{
        background: none;
    }

</style>

<style scoped>
    .qr{
        width:93px;
        height:28px;
        background:rgba(6,55,158,1);
        opacity:1;
        border-radius:8px;
        text-align: center;
        line-height: 28px;
        margin-top: 29px;
        color: #fff;
        font-size:12px;
        font-weight:bold;
    }
    .mypopups{
        width:282px;
        height:135px;
        background:rgba(255,255,255,1);
        border-radius: 16px!important;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .mypopups_topr{
        margin-left:13px;
        font-size:15px;
        font-family:Source Han Sans CN;
        font-weight:bold;
        color:rgba(70,70,70,1);
    }
    .mypopups_top{
        display: flex;
        margin-top: 32px;
        align-items: center;
    }
    .mypopups_topl{
        width: 24px;
        height: 24px;
        background: url("../assets/tip_icon.png") no-repeat center;
        background-size: 100% 100%;
    }
    ::-webkit-input-placeholder{
        font-size: 12px;
    }
    .font_area textarea{
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
        padding-left: 10px;
        padding-top: 6px;

    }

    .pos_item_left {
        position: absolute;
        width: 70px;
        height: 15px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(44, 44, 44, 1);
        margin-left: 28px;
        display: flex;
        justify-content: space-between;
    }

    .pos_item_right {
        text-align: right;
        right: 42px;
        position: absolute;
        width: 169px;
        height: 17px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(155, 155, 155, 1);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .area_item_left {
        position: absolute;
        width: 70px;
        height: 15px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(44, 44, 44, 1);
        margin-left: 28px;
        display: flex;
        justify-content: space-between;
    }

    .for_arrow {
        position: absolute;
        background: url("../assets/img/arrow.gif") no-repeat center;
        background-size: 100% auto;
        width: 12px;
        height: 22px;
        margin-left: 335px;
        margin-top: -21px;
    }

    .area_item_right {
        text-align: right;
        position: absolute;
        width: 150px;
        right: 52px;
        height: 17px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(155, 155, 155, 1);
        margin-left: 169px;
        left: -17px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .persion_item_left {
        position: absolute;
        width: 70px;
        height: 17px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(44, 44, 44, 1);
        margin-left: 28px;
    }

    .persion_item_right {
        text-align: right;
        position: absolute;
        width: 150px;
        height: 17px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 20px;
        color: rgba(155, 155, 155, 1);
        margin-left: 169px;
        left: -17px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .for_img1 {
        background: url("../assets/img/apply_1.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 28px;
        width: 19.57px;
        height: 18px;
    }

    .for_img4 {
        background: url("../assets/img/apply_4.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 28px;
        width: 19.57px;
        height: 18px;
    }
    .for_img2{
        position: absolute;
        background: url("../assets/img/apply_2.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 28px;
        margin-top: 20px;
        width: 18px;
        height: 16px;
    }
    .for_img5 {
        background: url("../assets/img/apply_5.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 28px;
        width: 19.57px;
        height: 20px;
        margin-top: 18px;
    }

    .for_img3 {
        position: absolute;
        background: url("../assets/img/apply_3.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 28px;
        margin-top: 20px;
        width: 20px;
        height: 20px;
    }


    .for_img7 {
        position: absolute;
        background: url("../assets/img/newItem8.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 28px;
        margin-top: -12px;
        width: 14px;
        height: 16px;
    }

    .content {
        background: #f2f4f5;
        min-height: 100vh;
        padding-top: 16px;
        padding-bottom: 80px;
    }

    .topPart {
        width: 375px;
        height: 166px;
        background: white;
        padding-top: 23px;
    }

    .bottomPart {
        margin-top: 18px;
        width: 375px;
        height: 117px;
        background: rgba(255, 255, 255, 1);
        padding-top: 23px;
    }

    .subButton {
        background: url("../assets/img/subButton.png") no-repeat center;
        background-size: 100% auto;
        width: 230px;
        height: 53px;
        margin-left: 73px;
        margin-top: 27px;
        padding-top: 12px;
    }

    .subcontent {
        position: relative;
        width: 60px;
        height: 15px;
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 26px;
        color: rgba(255, 255, 255, 1);
        opacity: 1;
        align-items: center;
        margin-left: 85px;
    }

    .theLine1 {
        width: 317px;
        height: 1px;
        background: rgb(230, 230, 230);
        opacity: 1;
        margin-left: 30px;
        margin-top: 9px;
    }

    .theLine2 {
        width: 317px;
        height: 1px;
        background: rgb(230, 230, 230);
        opacity: 1;
        margin-left: 30px;
        margin-top: 55px;
    }

    .persion {
        display: flex;
        justify-content: space-between;
    }

    .for_img6 {
        background: url("../assets/img/applyReason.png") no-repeat center;
        background-size: 100% auto;
        margin-left: 28px;
        width: 19.57px;
        height: 18px;
    }

    .font_area {
        width: 317px;
        height: 118px;
        background: rgba(243, 243, 243, 1);
        border: 1px solid rgba(210, 210, 210, 1);
        opacity: 1;
        border-radius: 6px;
        margin-top: 16px;
        margin-left: 23px;
    }

    .forNew{
        background: url("../assets/img/newItem5.png") no-repeat center;
        background-size: 100% auto;
        width: 220px;
        height: 34px;
        border: none;
        position: absolute;
        left: 50%;
        margin-left: -110px;
        bottom: 10px;
        z-index: 999;
        font-size:12px;
        font-family:Source Han Sans CN;
        font-weight:400;
        line-height: 34px;
        text-align: center;
        color:rgba(255,255,255,1);;
    }
    .picker-items{
        bottom: 28px;
        margin-top: -33px;
    }
    .font_area2{
        font-size:15px;
        font-weight:500;
        color:rgba(44,44,44,1);
        position: absolute;
        margin-top: 20px;
        left: 50%;
        width:120px;
        margin-left: -60px;
        height:16px;
        line-height: 16px;
        text-align: center;
    }
    .for_arrow2{
        width: 11px;
        height: 19px;
        background: url("../assets/img/newItem7.png") no-repeat center;
        background-size: 100% auto;
        position: absolute;
        margin-left: 22px;
        margin-top: 22px;
    }
</style>
